<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeTabkey" :lazy-load="true">
      <a-tab-pane title="订单详情" key="1">
        <shortorderdetails :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="交/还车信息" key="20">
        <GiveReturnCar :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="费用信息" key="2">
        <shortordercostvoid :orderId="orderId" v-if="source == 'void'" />
        <div v-else>
          <div class="menus">
            <div
              :class="['menus-item', item.active ? 'active' : '']"
              v-for="(item, index) in menus"
              :key="index"
              @click="chooseMenu(item.deIndex)"
            >
              {{ item.name }}
            </div>
          </div>
          <shortordercost v-if="activeTabCost == 0" :orderId="orderId" />
          <three-order v-if="activeTabCost == 1" :orderId="orderId" bizType="1" />
        </div>
      </a-tab-pane>
      <a-tab-pane title="芝麻免押" v-if="currentshortOrderDetails?.freeDepositTabShow" key="13">
        <zhima-deposit-free :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="续租记录" key="3">
        <shortorderrele :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="换车记录" key="4">
        <shortorderchangecar :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="违章记录" key="5">
        <ViolationInfo eventType="4" :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="调车记录" key="7">
        <TransferInfo :carId="routeQuery.carId" />
      </a-tab-pane>
      <a-tab-pane title="合同记录" key="8">
        <a-tabs v-model:active-key="contractTabKey">
          <a-tab-pane :title="`普通版电子合同 (${contractCount.freeCount || 0})`" key="81">
            <ContractRecordFree permission-prefix="svms:order:short-order" :orderId="orderId" :orderType="1" :payType="0" />
          </a-tab-pane>
          <a-tab-pane :title="`付费版电子合同 (${contractCount.payCount || 0})`" key="82">
            <ContractRecordPay permission-prefix="svms:order:short-order" :orderId="orderId" :orderType="1" :payType="1" />
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane title="运营成本支出记录" key="10">
        <TCOConst :orderId="orderId" :type="1" />
      </a-tab-pane>
      <a-tab-pane title="ETC租赁订单" key="11">
        <ETCOrder :orderId="orderId" :orderType="1" />
      </a-tab-pane>
      <a-tab-pane title="虚拟车钥匙" key="12">
        <CarRecord :orderId="orderId" :type="1" />
      </a-tab-pane>
      <a-tab-pane title="操作记录" key="9">
        <OperateRecord :orderId="orderId" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="ShortOrderDetail" lang="ts">
  import ThreeOrder from './components/three-order.vue'
  import shortorderchangecar from './components/short-order-changecar.vue'
  import shortorderrele from './components/short-order-rele.vue'
  import shortorderdetails from './components/short-order-details.vue'
  import GiveReturnCar from './components/give-return-car.vue'
  import shortordercost from './components/short-order-cost.vue'
  import shortordercostvoid from './components/void-order-cost.vue'
  import ViolationInfo from './components/violation-info.vue'
  import TransferInfo from './components/transfer-info.vue'
  import ContractRecordPay from './components/contract-record-pay.vue'
  import ContractRecordFree from './components/contract-record-free.vue'
  import CarRecord from './components/car-record.vue'
  import OperateRecord from './components/operate-record.vue'
  import TCOConst from '../../components/tco-const.vue'
  import ETCOrder from '../../components/etc-order.vue'
  import ZhimaDepositFree from '../components/alipay-deposit/zhima-deposit-free.vue'

  import { ref, watch, onMounted, provide } from 'vue'
  import { useRoute } from 'vue-router'
  import { getContractRecordCount, getShortOrdrDetails } from '@/api/order/sOrder'
  const menus = ref([
    { name: '费用明细', deIndex: 0, active: true },
    { name: '三方支付账单', deIndex: 1 },
  ])
  const activeTabCost = ref(0)

  const route = useRoute()
  const routeQuery = route.query
  // 短租作废订单来源
  const source = ref(route.query.source)
  console.log('source', source)
  const activeTabkey = ref('1')
  const contractTabKey = ref('81')
  const orderId = +route.params.id

  if (routeQuery.tab) {
    activeTabkey.value = routeQuery.tab as string
  }
  if (routeQuery.contractTab) {
    contractTabKey.value = routeQuery.contractTab as string
  }
  // 将订单详情进行广播
  const currentshortOrderDetails = ref()
  getShortOrdrDetails({ id: orderId })
    .then((res: any) => {
      currentshortOrderDetails.value = res.result.orderInfo
    })
    .catch(() => {
      currentshortOrderDetails.value = {}
    })
  provide('getShortOrderDetail', currentshortOrderDetails)

  /**
   * 获取合同数量
   */
  const contractCount = ref({
    freeCount: 0,
    payCount: 0,
  })
  const getContractCount = () => {
    getContractRecordCount({ orderType: 1, orderId }).then((res: any) => {
      contractCount.value = res.result
    })
  }
  provide('getContractCountShortOrder', getContractCount)
  const chooseMenu = (i: any) => {
    menus.value.forEach((e) => {
      i == e.deIndex ? (e.active = true) : (e.active = false)
      activeTabCost.value = i
    })
  }

  onMounted(() => {
    getContractCount()
  })

  // 默认选中某个 tab
  watch(
    () => [routeQuery.tab, routeQuery.contractTab],
    (newVal) => {
      if (newVal[0]) activeTabkey.value = routeQuery.tab as string
      if (newVal[1]) contractTabKey.value = routeQuery.contractTab as string
    },
    { immediate: true }
  )
</script>

<style lang="less" scoped>
  .menus {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    .menus-item {
      color: #4e5969;
      font-size: 28rpx;
      padding: 5px 16px;
      margin-right: 12px;
      font-weight: 400;
      cursor: pointer;
    }
    .active {
      border-radius: 30px;
      color: #1890ff;
      font-weight: 500;
      background: #f2f3f5;
    }
  }
</style>
